<template>
  <div id="main">
    <Header />
    <Nav />
    <div class="banner">
      <el-carousel arrow="never" height="350px">
        <el-carousel-item v-for="item in carousel" :key="item.F_Id">
          <img :src="'/cloud-api' + item.F_Image">
          <div class="title">{{ item.F_Description }}</div>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="dataPanel">
      <div class="data-main">
        <div class="data-list" v-for="(item, index) in dataPanels" :key="index">
          <a class="list" :class="'background'+index">
            <label>{{ item.name }}</label>
            <label :style="getLabelStyle()" v-if="hasToken">
              {{ item.cnt.slice(0,-1) }}
              <span>{{item.cnt.slice(-1)}}</span>
            </label>
            <div v-else class="data-list_no_hasToken">
              登录查看
            </div>
          </a>
        </div>
      </div>
    </div>
    <div class="model">
      <div class="model-main">
        <div class="model-left">
          <!-- <a href="/clogin" target="_blank"> -->
          <a :href="getLink('/clogin')" target="_blank">
            <div class="model-title">
              <div class="model-title_main">
                <div class="model-title_header">
                  <img src="@/assets/images/home/model1.png">
                  注册企业数
                </div>
                <div v-if="hasToken">
                  <label :style="getLinkLabelStyle()">{{ companyNum.slice(0,-1) }}</label>
                  {{ companyNum.slice(-1) }}
                </div>
                <div v-else class="no_hasToken">
                  登录查看
                </div>
              </div>
            </div>
            <div class="model-link">
              <div class="link-text">
                改造企业入口
                <img src="@/assets/images/home/speed-mini-fill.png">
              </div>
            </div>
          </a>
        </div>
        <div class="model-left">
          <!-- <a href="/clogin" target="_blank"> -->
          <a :href="getLink('/slogin')" target="_blank">
            <div class="model-title">
              <div class="model-title_main">
                <div class="model-title_header">
                  <img src="@/assets/images/home/model2.png">
                  数字化服务商数
                </div>
                <div v-if="hasToken">
                  <label :style="getLinkLabelStyle()">{{ serviceNum.slice(0,-1) }}</label>
                  {{ serviceNum.slice(-1) }}
                </div>
                <div v-else class="no_hasToken">
                  登录查看
                </div>
              </div>
            </div>
            <div class="model-link">
              <div class="link-text">
                服务商入口
                <img src="@/assets/images/home/speed-mini-fill.png">
              </div>
            </div>
          </a>
        </div>
        <div class="model-left">
          <!-- <a href="/clogin" target="_blank"> -->
          <a :href="getLink('/jlogin')" target="_blank">
            <div class="model-title">
              <div class="model-title_main">
                <div class="model-title_header">
                  <img src="@/assets/images/home/model3.png">
                  金融机构数
                </div>
                <div v-if="hasToken">
                  <label :style="getLinkLabelStyle()">{{ institutionNum.slice(0,-1) }}</label>
                  {{ institutionNum.slice(-1) }}
                </div>
                <div v-else class="no_hasToken">
                  登录查看
                </div>
              </div>

            </div>
            <div class="model-link">
              <div class="link-text">
                金融机构入口
                <img src="@/assets/images/home/speed-mini-fill.png">
              </div>
            </div>
          </a>
        </div>
      </div>
    </div>

    <div class="notices">
      <el-tabs v-model="activeName" stretch>
        <el-tab-pane label="征集通知" name="first">
          <el-empty description="暂无数据" v-if="total1 === 0"></el-empty>
          <div class="policy-list-box" v-else>
            <div class="policy-list_main">
              <a @click="toDetail(item.f_id, '征集通知')" class="policy-list" v-for="item in newstype1"
                :key="item.f_id">
                <div class="policy-des" :title="item.f_title">
                  <div class="square"></div>
                  <label class="policy-des_title">{{ item.f_title }}</label>
                  <label class="policy-des_date">{{ item.date }}</label>
                </div>
              </a>
            </div>
            <div class="general_pagination">
              <span class="total">{{ `共 ${total1} 项数据` }}</span>
              <el-pagination background :page-size="10"
                @current-change="(val) => newsCollect(2, val, 5)" layout="prev, pager, next"
                :total=total1>
              </el-pagination>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="遴选动态" name="second">
          <el-empty description="暂无数据" v-if="total2 === 0"></el-empty>
          <div class="policy-list-box" v-else>
            <div class="policy-list_main">
              <a @click="toDetail(item.f_id, '遴选动态')" class="policy-list" v-for="item in newstype2"
                :key="item.f_id">
                <div class="policy-des" :title="item.f_title">
                  <div class="square"></div>
                  <label class="policy-des_title">{{ item.f_title }}</label>
                  <label class="policy-des_date">{{ item.date }}</label>
                </div>
              </a>
            </div>
            <div class="general_pagination">
              <span class="total">{{ `共 ${total2} 项数据` }}</span>
              <el-pagination background :page-size="10"
                @current-change="(val) => newsTrends(3, val, 5)" layout="prev, pager, next"
                :total=total2>
              </el-pagination>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="评测诊断" name="third">
          <el-empty description="暂无数据" v-if="total3 === 0"></el-empty>
          <div class="policy-list-box" v-else>
            <div class="policy-list_main">
              <a @click="toDetail(item.f_id, '评测诊断')" class="policy-list" v-for="item in newstype3"
                :key="item.f_id">
                <div class="policy-des" :title="item.f_title">
                  <div class="square"></div>
                  <label class="policy-des_title">{{ item.f_title }}</label>
                  <label class="policy-des_date">{{ item.date }}</label>
                </div>
              </a>
            </div>
            <div class="general_pagination">
              <span class="total">{{ `共 ${total3} 项数据` }}</span>
              <el-pagination background :page-size="10"
                @current-change="(val) => newsReview(4, val, 5)" layout="prev, pager, next"
                :total=total3>
              </el-pagination>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
      <div class="notices-right">
        <div class="policy-img">
          <img src="@/assets/images/home/notice.png" />
        </div>
        <el-empty description="暂无数据" v-if="total4 === 0"></el-empty>
        <div class="policy-list-box" v-else>
          <div class="policy-list_main">
            <a @click="toDetail(item.f_id, '政策公告')" class="policy-list" v-for="item in newstype4"
              :key="item.f_id">
              <div class="policy-des" :title="item.f_title">
                <strong class="policy-des_type">[政策通知]</strong>
                <label class="policy-des_title">{{ item.f_title }}</label>
                <label class="policy-des_date">{{ item.date }}</label>
                <!-- {{ item.f_description }} -->
              </div>
            </a>
          </div>
          <div class="general_pagination">
            <span class="total">{{ `共 ${total4} 项数据` }}</span>
            <el-pagination background :page-size="4" @current-change="(val) => newsPoily(1, val, 4)"
              layout="prev, pager, next" :total=total4>
            </el-pagination>
          </div>
        </div>
      </div>
      <!-- <class class="notices-right">
        <el-tabs v-model="activeName2">
          <el-tab-pane label="通知公告" name="first">

          </el-tab-pane>
        </el-tabs>
      </class> -->
    </div>
    <div class="overview" v-if="false">
      <el-tabs v-model="activeName4">
        <!--        <el-tab-pane label="被改造企业数字化水平自测总览" name="first">-->
        <!--          <div class="echart" id="mychart" :style="myChartStyle"></div>-->
        <!--        </el-tab-pane>-->
        <el-tab-pane label="服务商动态" name="first">
          <el-empty description="暂无数据" v-if="total6 === 0"></el-empty>
          <div v-else v-for="item in newstype6" :key="item.F_Id" class="service-main">
            <a @click="toDetailService(item.F_Id, '服务商动态')" class="service-list">
              <div class="service-title">{{ item.F_Title }}</div>
              <div class="service-endTime">截止日期：{{ item.F_EndTime }}</div>
              <div class="service-name">服务商名称：{{ item.F_Organize }}</div>
              <div class="service-tag">
                <label>动态类型</label>
                <label>{{ item.F_Type }}</label>
              </div>
              <div class="service-startTime">发布时间：{{ item.F_CreatorTime }}</div>
            </a>
          </div>
          <el-pagination background :page-size="6" @current-change="(val) => serviceTrends(val, 6)"
            layout="total,prev, pager, next" :total=total6>
          </el-pagination>
        </el-tab-pane>
        <el-tab-pane label="热门培训课程" name="third">
          <el-empty description="暂无数据" v-if="total7 === 0"></el-empty>
          <div v-else v-for="item in course" :key="item.F_Id" class="course-main">
            <a @click="toDetailCourse(item.F_Id, '热门培训课程')" class="course-list">
              <div class="img">
                <img v-if="item.F_Image !== null" :src="'/cloud-api' + item.F_Image" />
                <img v-else src="@/assets/images/course.png" />
              </div>
              <div class="title">{{ item.F_Title }}</div>
              <div class="time">发布时间：{{ item.F_CreatorTime }}</div>
              <div class="publisher">课程发布方：{{ item.F_Organize }}</div>
              <div class="des">{{ item.F_Description }}</div>
            </a>
          </div>
          <el-pagination :page-size="4" @current-change="(val) => popularCourses(val, 4)"
            layout="prev, pager, next" :total=total7>
          </el-pagination>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="market">
      <div class="market_content">
        <el-tabs v-model="activeName3" type="card">
          <el-tab-pane label="热门产品" name="first">
            <el-empty description="暂无数据" v-if="total5 === 0"></el-empty>
            <div class="product_main" v-else>
              <a class="product_main_list" v-for="item in newstype5" :key="item.F_Id"
                @click="toDetailProducts(item.F_Id, '热门产品')">
                <h3>{{ item.f_product_name }}</h3>
                <div class="Enterprise_name">{{ item.Enterprise_name }}</div>
                <div class="tags">
                  <div class="tags_box" v-if="item.f_deployment_method">
                    <span class="blue tag"
                      v-for="(tag,index) in item.f_deployment_method.split('；').filter(Boolean)"
                      :key="index">{{tag}}</span>
                  </div>
                  <div class="tags_box" v-if="item.type">
                    <span class="purple tag"
                      v-for="(tag,index) in item.type.split(' ').filter(Boolean)"
                      :key="index">{{tag}}</span>
                  </div>
                </div>
                <div class="f_product_info" :title="item.f_product_info">{{ item.f_product_info }}
                </div>
                <div class="list_info">
                  <div>联系人</div> <span>{{item.Contact_person}}</span>
                </div>
                <div class="list_info">
                  <div>联系电话</div> <span>{{item.Contact_information}}</span>
                </div>
                <div class="list_info">
                  <div>联系邮箱</div> <span>{{item.email}}</span>
                </div>
                <div class="price">价格区间(万元):<span>{{ item.price}}</span></div>
                <div class="button">详情</div>
              </a>
            </div>
            <div class="general_pagination" v-show="total5>0">
              <span class="total">{{ `共 ${total5} 项数据` }}</span>
              <el-pagination background :page-size="6" @current-change="(val) => market(val, 6)"
                layout="prev, pager, next" :total=total5>
              </el-pagination>
            </div>
          </el-tab-pane>
          <el-tab-pane label="免费产品" name="second">
            <el-empty description="暂无数据" v-if="total8 === 0"></el-empty>
            <div class="product_main" v-else>
              <a class="product_main_list" v-for="item in freeProducts" :key="item.F_Id"
                @click="toDetailProducts(item.F_Id, '免费产品')">
                <h3>{{ item.f_product_name }}</h3>
                <div class="Enterprise_name">{{ item.Enterprise_name }}</div>
                <div class="tags">
                  <div class="tags_box" v-if="item.f_deployment_method">
                    <span class="blue tag"
                      v-for="(tag,index) in item.f_deployment_method.split('；').filter(Boolean)"
                      :key="index">{{tag}}</span>
                  </div>
                  <div class="tags_box" v-if="item.type">
                    <span class="purple tag"
                      v-for="(tag,index) in item.type.split(' ').filter(Boolean)"
                      :key="index">{{tag}}</span>
                  </div>
                </div>
                <div class="f_product_info" :title="item.f_product_info">{{ item.f_product_info }}
                </div>
                <div class="list_info">
                  <div>联系人</div> <span>{{item.Contact_person}}</span>
                </div>
                <div class="list_info">
                  <div>联系电话</div> <span>{{item.Contact_information}}</span>
                </div>
                <div class="list_info">
                  <div>联系邮箱</div> <span>{{item.email}}</span>
                </div>
                <div class="price">价格区间(万元):<span>{{ item.price}}</span></div>
                <div class="button">详情</div>
              </a>
            </div>
            <div class="general_pagination" v-show="total8>0">
              <span class="total">{{ `共 ${total8} 项数据` }}</span>
              <el-pagination background :page-size="6"
                @current-change="(val) => freeProduct(val, 6)" layout="prev, pager, next"
                :total=total8>
              </el-pagination>
            </div>
          </el-tab-pane>
        </el-tabs>
        <!-- 排序按钮 -->
        <div class="market_content_sortType">
          <el-button type="text" :class="activeName3SortType=='click'?'is-active1':''"
            @click="clickSort()">点击量排序</el-button>
          <el-button type="text" :class="activeName3SortType=='downLoad'?'is-active1':''"
            @click="downloadSort()">下载量排序</el-button>
        </div>
      </div>
    </div>
    <Link />
    <Floor />
    <formNotice v-if="formVisible" ref="form" @close="closeForm" />
    <formProduct v-if="formVisible2" ref="form2" @close="closeForm" />
    <formDynamics v-if="formVisible3" ref="form3" @close="closeForm" />
    <formCourse v-if="formVisible4" ref="form4" @close="closeForm" />
  </div>
</template>

<script>
import axios from 'axios'
import formNotice from './Detail'
import formProduct from './Detail2'
import formDynamics from './Detail3'
import formCourse from './Detail4'
import * as echarts from "echarts";
import Floor from '@/views/login/component/Floor'
import Link from '@/views/login/component/Link'
import Header from '@/views/login/component/Header'
import Nav from '@/views/login/component/Nav'

export default {
  name: "index",
  components: {
    formNotice, formProduct, formDynamics, formCourse,
    Floor,
    Link,
    Header,
    Nav
  },
  data() {
    return {
      // 获取 session 值
      hasToken: (localStorage.getItem('jnpf_token') == null || localStorage.getItem('jnpf_token') == '' ||
        localStorage.getItem('jnpf_token') == undefined) ? false : true,
      companyNum: 0,
      serviceNum: 0,
      institutionNum: 0,
      myChartStyle: { float: "left", width: "1138px", height: "568px" }, //图表样式
      activeName: 'first',
      activeName2: 'first',
      activeName3: 'first',
      activeName4: 'first',
      formVisible: false,
      formVisible2: false,
      formVisible3: false,
      formVisible4: false,
      total1: 0,
      total2: 0,
      total3: 0,
      total4: 0,
      total5: 0,
      total6: 0,
      total7: 0,
      total8: 0,
      newstype1: [],
      newstype2: [],
      newstype3: [],
      newstype4: [],
      newstype5: [],
      newstype6: [],
      dataPanels: [],
      freeProducts: [],
      course: [],
      carousel: [],
      activeName3SortType: 'click'
    }
  },
  created() {
    this.initEcharts();
  },

  watch: {},
  mounted() {
    this.modelNum();
    this.initEcharts();
    this.newsCollect(2, 1, 5);
    this.newsTrends(3, 1, 5);
    this.newsReview(4, 1, 5);
    this.newsPoily(1, 1, 5);
    this.market(1, 6)
    this.carouselChart();
    // this.friendLink();
    this.serviceTrends(1, 6);
    this.popularCourses(1, 4);
    this.dataPanel();
    this.freeProduct(1, 4)
  },
  methods: {
    getLinkLabelStyle() {
      if (this.hasToken) {
        return { fontSize: '33px' }; // 设置字体大小为 16px
      } else {
        return { fontSize: '18px' }; // 设置字体大小为 12px
      }
    },
    getLabelStyle() {
      if (this.hasToken) {
        return { fontSize: '30px' }; // 设置字体大小为 16px
      } else {
        return { fontSize: '20px' }; // 设置字体大小为 12px
      }
    },
    getLink(path) {
      if (this.hasToken) {
        return "/home";
      } else {
        return path
      }
    },
    initEcharts() {
      const url = `https://fzzxqy.demo-caii.com/cloud-api2/portal/evaluateData`;
      axios.get(url).then(res => {
        let option = {
          title: {
            text: res.data.data[1] + ' 家企业已完成数字化水平评测'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {},
          grid: {
            left: '2%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: ['针织或钩针编织物及其制造', '棉纺织或化纤纺织及印染精加工', '电子器件制造及配套', '汽车零部件及配件制造']
          },
          yAxis: {
            type: 'value',
            boundaryGap: [0, 0.5]
          },
          series: res.data.data[0].map((item, index) => {
            return {
              name: item.name,
              type: 'bar', // 修改为柱状图
              data: item.data,
              barWidth: 25, // 控制柱状图的宽度
              itemStyle: {
                color: `rgba(24, 144, 255, ${1 - 0.15 * index})` // 控制颜色深浅度
              }
            };
          })
        };

        const myChart = echarts.init(document.getElementById("mychart"));
        myChart.setOption(option);
        //随着屏幕大小调节图表
        window.addEventListener("resize", () => {
          myChart.resize();
        });
      })
    },
    clickSort() {
      this.activeName3SortType = 'click'
      if (this.activeName3 === "first") {
        //热门产品点击量排序
      } else {
        //免费产品点击量排序

      }
    },
    downloadSort() {
      this.activeName3SortType = 'downLoad'
      if (this.activeName3 === "first") {
        //热门产品下载量排序
      } else {
        //免费产品下载了量排序

      }
    },
    modelNum() {
      const url = `https://fzzxqy.demo-caii.com/cloud-api2/portal/userCountType?hasToken=` + this.hasToken;
      axios.get(url).then(res => {
        this.companyNum = res.data.data[0].cnt;
        this.serviceNum = res.data.data[1].cnt;
        this.institutionNum = res.data.data[2].cnt;
      })
    },

    carouselChart() {
      const url = `https://fzzxqy.demo-caii.com/cloud-api2/portal/banner`;
      axios.get(url).then(res => {
        this.carousel = res.data.data;
      })
    },
    closeForm() {
      this.formVisible = false;
      this.formVisible2 = false
    },
    toDetail(id, title) {
      this.formVisible = true
      this.$nextTick(() => {
        this.$refs.form.init(id, title)
      })
    },
    toDetailProducts(id, title) {
      this.formVisible2 = true
      this.$nextTick(() => {
        this.$refs.form2.init(id, title)
      })
    },
    toDetailService(id, title) {
      this.formVisible3 = true
      this.$nextTick(() => {
        this.$refs.form3.init(id, title)
      })
    },
    toDetailCourse(id, title) {
      this.formVisible4 = true
      this.$nextTick(() => {
        this.$refs.form4.init(id, title)
      })
    },
    redirectToJFY() {
      window.open("https://www.fjjfypt.com/jfy/home/index", "_blank");
    },

    newsCollect(type, currentPage, size) {
      const url = `https://fzzxqy.demo-caii.com/cloud-api2/portal/zctz?type=${type}&page=${currentPage}&size=${size}`;
      axios.get(url).then(res => {
        this.total1 = res.data.data.total;
        this.newstype1 = res.data.data.list;
      })
    },
    newsTrends(type, currentPage, size) {
      const url = `https://fzzxqy.demo-caii.com/cloud-api2/portal/zctz?type=${type}&page=${currentPage}&size=${size}`;
      axios.get(url).then(res => {
        this.total2 = res.data.data.total;
        this.newstype2 = res.data.data.list;
      })
    },
    newsReview(type, currentPage, size) {
      const url = `https://fzzxqy.demo-caii.com/cloud-api2/portal/zctz?type=${type}&page=${currentPage}&size=${size}`;
      axios.get(url).then(res => {
        this.total3 = res.data.data.total;
        this.newstype3 = res.data.data.list;
      })
    },
    newsPoily(type, currentPage, size) {
      const url = `https://fzzxqy.demo-caii.com/cloud-api2/portal/zctz?type=${type}&page=${currentPage}&size=${size}`;
      axios.get(url).then(res => {
        this.total4 = res.data.data.total;
        this.newstype4 = res.data.data.list;
      })
    },
    market(currentPage, size) {
      const url = `https://fzzxqy.demo-caii.com/cloud-api2/portal/market?page=${currentPage}&size=${size}`
      axios.get(url).then(res => {
        this.total5 = res.data.data.total;
        this.newstype5 = res.data.data.list;
        console.log(this.newstype5);
      })
    },
    freeProduct(currentPage, size) {
      const url = `https://fzzxqy.demo-caii.com/cloud-api2/portal/freeProducts?page=${currentPage}&size=${size}`
      axios.get(url).then(res => {
        this.total8 = res.data.data.total;
        this.freeProducts = res.data.data.list;
      })
    },
    serviceTrends(currentPage, size) {
      const url = `https://fzzxqy.demo-caii.com/cloud-api2/portal/serviceProviderDynamics?page=${currentPage}&size=${size}`
      axios.get(url).then(res => {
        this.total6 = res.data.data.total;
        this.newstype6 = res.data.data.list;
      })
    },
    dataPanel() {
      console.log(1);
      const url = `https://fzzxqy.demo-caii.com/cloud-api2/portal/topDataView?hasToken=` + this.hasToken;
      axios.get(url).then(res => {
        console.log(res)
        this.dataPanels = res.data.data;
      })
    },
    popularCourses(currentPage, size) {
      const url = `https://fzzxqy.demo-caii.com/cloud-api2/portal/fzPopularTrainingCourses?page=${currentPage}&size=${size}`
      axios.get(url).then(res => {
        this.total7 = res.data.data.total;
        this.course = res.data.data.list;
      })
    },
    handleSelect(key, keyPath) {
    },

  }
}
</script>
<style lang="scss" scoped>
.el-empty {
  width: 100%;
}

#main {
  width: 100%;
  background: #ffffff;
  // background: #f0f4f9;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 0.2fr 0.2fr auto auto auto auto auto auto auto 0.8fr;
  gap: 0px 0px;
  grid-template-areas:
    'head head head head'
    'nav nav nav nav'
    'banner banner banner banner'
    'dataPanel dataPanel dataPanel dataPanel'
    'model model model model'
    'notices notices notices notices'
    'overview overview overview overview'
    'market market market market'
    'friendship-link friendship-link friendship-link friendship-link'
    'footer footer footer footer';
}

.banner {
  grid-area: banner;
  width: 100%;
  // margin: 20px auto;
  margin-bottom: 40px;

  .el-carousel .el-carousel__container .el-carousel__item .title {
    width: 1100px;
    margin: -300px auto;
    color: #ffffff;
    font-size: 28px;
    line-height: 60px;
    font-weight: bold;
    white-space: normal;
  }

  ::v-deep .el-carousel__button {
    border-radius: 50%;
    width: 10px;
    height: 10px;
    opacity: 1;
  }

  ::v-deep .is-active .el-carousel__button {
    background-color: #dd4b1c !important;
  }

  img {
    width: 100%;
    height: 100%;
  }
}

.dataPanel {
  grid-area: dataPanel;
  // background-color: #eeeeee;
  height: auto;
  margin-bottom: 40px;
  .data-main {
    width: 1200px;
    margin: 0px auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    .data-list {
      // flex-basis: 33.3%;
      box-sizing: border-box;
      // padding: 15px;
      .data-list_no_hasToken {
        width: 104px;
        height: 32px;
        border-radius: 127px;
        background: #ffffff;
        display: flex;
        color: #3d3d3d;
        align-items: center;
        justify-content: center;
      }
      .background0,
      .background1 {
        background: url('~@/assets/images/del/dataPanels1.png') 100% 100% no-repeat;
      }
      .background2,
      .background3 {
        background: url('~@/assets/images/del/dataPanels2.png') 100% 100% no-repeat;
      }
      .background4,
      .background5 {
        background: url('~@/assets/images/del/dataPanels3.png') 100% 100% no-repeat;
      }

      .list {
        display: flex;
        flex-direction: column;
        justify-content: center;
        border-radius: 10px;
        box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4);
        height: 180px;
        width: 180px;
        padding: 0 10px;
        align-items: center;
        color: #ffffff;
        label {
          text-align: center;
          font-size: 18px;
        }
        label:first-child {
          height: 60px;
          color: #faf3f1;
          margin-bottom: 10px;
        }

        label:last-child {
          font-weight: bold;
          span {
            font-size: 18px;
            color: #faf3f1;
          }
        }
      }
    }
  }
}

.model {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  gap: 0px 0px;
  grid-template-areas: 'model-main';
  grid-area: model;
  margin-bottom: 40px;
}

.model-main {
  display: flex;
  justify-content: space-between;
  width: 1200px;
  height: 180px;
  margin: 0 auto;
  a {
    display: contents;
  }

  .model-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px;
    flex: 1;
    &_main {
      display: flex;
      width: 100%;
      justify-content: space-between;
      align-items: flex-end;
    }
    &_header {
      display: flex;
      align-items: flex-end;
      img {
        margin-right: 10px;
      }
    }
    // width: 50%;
    label:first-child {
      color: #337cce;
      font-size: 18px;
      //font-weight: bold;
      text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.3);
      margin-bottom: 15px;
    }

    label:last-child {
      color: #337cce;
      font-weight: bold;
      font-size: 33px;
    }
  }

  .model-link {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 70px;
    color: #ffffff;
    background: #1890ff;

    .link-i i {
      font-size: 30px;
      font-weight: bold;
      margin-right: 10px;
    }

    .link-text {
      display: flex;
      align-items: center;
      font-size: 20px;
      font-weight: bold;
    }
  }
}

.model-left {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  border-radius: 8px;
  opacity: 1;
  overflow: auto;
  width: 380px;
  // border: 2px solid #ffffff;
  background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%, #fefefe 100%);
  box-shadow: 0 4px 16px 0 #00000033;

  &:hover {
    transform: translateY(-5px);
    box-shadow: 0px 5px 8px 5px rgba(24, 144, 255, 0.5);
  }
}

.model-mid {
  display: flex;
  align-items: center;
  cursor: pointer;
  flex-direction: row;
  grid-area: model-mid;
  border: 2px solid #bbbbbb;
  border-radius: 0 50px;
  box-shadow: 0px 6px 6px 0px rgba(0, 0, 0, 0.2);
  background: linear-gradient(to right top, #fefcfa, #ffffff);

  .model-link {
    background: linear-gradient(to right, #337cce, #1890ff);
  }

  &:hover {
    transform: translateY(-5px);
    box-shadow: 0px 5px 8px 5px rgba(24, 144, 255, 0.5);
  }
}

.model-right {
  display: flex;
  align-items: center;
  cursor: pointer;
  flex-direction: row;
  grid-area: model-right;
  border: 2px solid #bbbbbb;
  border-radius: 0 50px;
  box-shadow: 0px 6px 6px 0px rgba(0, 0, 0, 0.2);
  background: linear-gradient(to right top, #f8fef9, #ffffff);

  .model-link {
    background: linear-gradient(to right, #1890ff, #3fb9f1);
  }

  &:hover {
    transform: translateY(-5px);
    box-shadow: 0px 5px 8px 5px rgba(24, 144, 255, 0.5);
  }
}

.notices {
  display: grid;
  grid-area: notices;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  gap: 0px 20px;
  grid-template-areas: 'notices-left  notices-right';
  min-height: 500px;
  width: 1200px;
  margin: 0px auto;
  border-radius: 8px;
  opacity: 1;
  background: #ffffff;
  box-shadow: 0 4px 16px 0 #0000001a;
  padding: 24px;
  margin-bottom: 40px;
  .el-tabs {
    height: 100%;
  }

  ::v-deep .el-tabs__header.is-top {
    border-bottom: 1px solid #3d3d3d50;
    padding: 0 10px;
  }
  ::v-deep .el-tabs__header {
    margin: 0;
  }
  ::v-deep .el-tabs__content {
    height: calc(100% - 40px);
    position: relative;
  }
  ::v-deep .el-tab-pane {
    height: 100%;
  }
  .policy-list-box {
    display: flex;
    height: 100%;
    flex-direction: column;
    .policy-list_main {
      height: 100%;
      .policy-list {
        &:hover .policy-des .policy-title label {
          color: #1890ff !important;
        }
        .policy-des {
          display: flex;
          align-items: center;
          justify-content: space-between;
          border-bottom: 1px dashed #3d3d3d50;
          padding: 20px 0;
          .square {
            width: 8px;
            height: 8px;
            opacity: 1;
            background: #1890ff;
          }
          &_type {
            color: #1890ff;
            // margin: 20px 0;
          }
          &_title {
            flex: 1;
            max-width: 420px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          &_date {
            color: #999999;
            font-size: 15px;
          }
        }
        &:last-child .policy-des {
          border: 0px;
        }
      }
    }
  }

  // .el-pagination {
  //   // position: absolute;
  //   // bottom: 10px;
  //   // right: 0;
  //   // display: flex;
  //   // justify-content: flex-end;
  // }
}
.general_pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  .total {
    color: #00000099;
  }
}
.notices-right {
  display: flex;
  flex-direction: column;
}

//
//::v-deep .el-tabs__nav-scroll {
//  padding-left: 20px;
//}

::v-deep .el-tabs__item {
  font-size: 20px;
  padding: 0 30px;
  color: #3d3d3d;
  font-weight: bold;
}

::v-deep .el-tabs__item.is-active {
  font-weight: bold;
  font-size: 20px;
  color: #1890ff;
}

::v-deep .el-tabs__nav-wrap::after {
  background-color: transparent !important;
}

::v-deep .el-tabs__active-bar {
  background-color: #1890ff !important;
  height: 3px;
}

.overview {
  grid-area: overview;
  background-color: #ffffff;
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4);
  border: 1px solid #3eb8f1;
  border-radius: 5px;
  padding: 20px 30px;
  width: 1200px;
  height: 660px;
  margin: 20px auto;

  .el-tab-pane {
    display: flex;
    flex-direction: row;
    width: 100%;
    flex-wrap: wrap;

    &:nth-child(2) {
      height: 100%;
    }

    &:last-child {
      justify-content: center;
      align-items: center;
      padding: 0 30px;
      position: relative;
      height: 100%;

      .el-pagination {
        position: absolute;
        top: 260px;
        width: 100%;
        height: 80px;

        ::v-deep button {
          background-color: transparent !important;
          color: #007bd3;
          height: 100%;

          &:first-child {
            position: absolute;
            left: -10px;
          }

          &:last-child {
            position: absolute;
            right: -10px;
          }

          .el-icon {
            font-size: 30px;
            font-weight: bolder;
          }
        }
      }

      ::v-deep .el-pager {
        display: none;
      }
    }
  }

  .service-main {
    width: 33.3%;
    padding: 10px;
  }

  .course-main {
    width: 25%;
    padding: 10px;
    height: 415px;
  }

  .el-tabs {
    height: 100%;
  }

  .service-list {
    display: flex;
    flex-direction: column;
    padding: 15px 20px;
    text-decoration: none;
    box-shadow: 2px 2px 10px rgba(24, 144, 255, 0.5);
    border: 1px solid #bbbbbb;
    background-color: #ffffff;
    border-radius: 20px;

    &:hover {
      transform: translateY(-5px);
      box-shadow: 0px 5px 8px 5px rgba(24, 144, 255, 0.5);
    }

    &:hover .service-title {
      color: #1890ff !important;
    }

    .service-title {
      font-size: 16px;
      font-weight: bold;
      color: #757575;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      margin-bottom: 10px;
      line-height: 25px;
      height: 50px;
    }

    .service-endTime,
    .service-name,
    .service-startTime {
      color: #757575;
      font-size: 14px;
      margin-bottom: 10px;
    }

    .service-tag {
      display: flex;
      flex-direction: column;
      background-color: #e5faff;
      margin-bottom: 10px;
      border-radius: 10px;
      justify-content: center;
      align-items: center;
      color: #1890ff;
      height: 65px;

      label:first-child {
        font-size: 14px;
        margin-bottom: 10px;
      }

      label:last-child {
        font-weight: bold;
        font-size: 17px;
      }
    }
  }

  .course-list {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 20px;
    text-decoration: none;
    box-shadow: 2px 2px 10px rgba(24, 144, 255, 0.5);
    border: 1px solid #bbbbbb;
    background-color: #ffffff;
    border-radius: 20px;

    &:hover {
      transform: translateY(-5px);
      box-shadow: 0px 5px 8px 5px rgba(24, 144, 255, 0.5);
    }

    &:hover .title {
      color: #1890ff !important;
    }

    .img {
      display: flex;
      height: 156px;
      justify-content: center;
      align-items: center;
      margin-bottom: 10px;

      img {
        width: 100%;
        border-radius: 10px;
        height: auto;
        max-height: 156px;
      }
    }

    .title {
      color: #757575;
      height: 44px;
      font-weight: bold;
      font-size: 16px;
      line-height: 22px;
      margin-bottom: 10px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      cursor: pointer !important;
    }

    .time {
      color: #757575;
      font-size: 14px;
      margin-bottom: 10px;
    }

    .publisher {
      color: #757575;
      font-size: 14px;
      margin-bottom: 10px;
    }

    .des {
      color: #757575;
      font-size: 14px;
      line-height: 20px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 4;
      overflow: hidden;
    }
  }

  ::v-deep .el-tabs__content {
    height: calc(100% - 50px);
    position: relative;
    margin-top: 10px;
  }

  .el-pagination {
    position: absolute;
    bottom: 0;
    right: 0;
  }
}

.market {
  grid-area: market;
  background-color: #f5f7fa;
  &_content {
    position: relative;
    width: 1200px;
    min-height: 730px;
    padding: 40px 0;
    margin: 0px auto;
    &_sortType {
      position: absolute;
      right: 16px;
      top: 64px;
      ::v-deep .el-button--text {
        color: #3d3d3d;
        &.is-active1 {
          color: #1890ff;
        }
      }
    }
  }
  .el-tabs {
    ::v-deep .el-tabs__header.is-top {
      position: relative;
      border: 0px;
    }
    ::v-deep .el-tabs__nav.is-top {
      display: flex;
      border: 0px;
    }
    ::v-deep .el-tabs__item.is-top.is-active {
      color: white;
      background: #1890ff;
    }
    ::v-deep .el-tabs__item {
      color: #999999;
      background: #fff;
      width: 200px;
      height: 50px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    ::v-deep .el-tabs__nav-scroll {
      display: flex;
      justify-content: center;
    }
    ::v-deep .el-tabs__content {
      position: static;
      overflow: visible;
      .el-tab-pane {
        display: flex;
        justify-content: space-between;
        flex-direction: row;
        width: 100%;
        height: 94%;
        flex-wrap: wrap;
      }
    }
  }
  .product_main {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    height: 100%;
    width: 100%;
    .product_main_list {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 390px;
      height: 500px;
      border-radius: 8px;
      background: #ffffff;
      padding: 24px;
      margin-bottom: 10px;
      margin-right: 10px;
      &:hover {
        transform: translateY(-5px);
        box-shadow: 0 4px 16px 0 #0000001a;
      }
      .f_product_info {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        color: #666666;
      }

      .list_info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 40px;
        color: #666666;
        border-bottom: 1px solid #3d3d3d40;
        span {
          color: #3d3d3d;
          font-weight: 500;
        }
      }
      .price {
        span {
          margin-left: 10px;
          color: #ee3232;
          font-size: 40px;
          font-weight: 700;
        }
      }
      .button {
        height: 48px;
        display: flex;
        border-radius: 148px;
        border: 1px solid #1890ff;
        background: #fff;
        align-items: center;
        justify-content: center;
        color: #1890ff;
        font-weight: 700;
      }
    }
  }
  .el-button--primary {
    position: absolute;
    top: 0;
    border: 0px;
    padding: 0 25px;
    border-radius: 10px;
    height: 40px;
    font-size: 13px;
    letter-spacing: 1px;
    font-weight: bold;

    ::v-deep i {
      font-weight: bold;
      font-size: 14px;
    }

    &:nth-last-child(2) {
      right: 210px;
      background-color: #ff9502;
    }

    &:last-child {
      right: 20px;
      background-color: #34c758;
    }
  }

  .el-button--primary:first-child {
    right: 100px;
  }

  .market-list {
    width: 380px;
    height: 530px;
    display: flex;
    flex-direction: column;
    padding: 10px 20px;
    text-decoration: none;
    background: #ffffff;
    // box-shadow: 0 0 5px rgba(24, 144, 255, 0.4);
    border: 1px solid #bbbbbb;
    cursor: pointer;
    border-radius: 8px;

    &:hover {
      transform: translateY(-5px);
      box-shadow: 0px 5px 8px 5px rgba(24, 144, 255, 0.5);
    }

    &:hover .market-des .market-title {
      color: #1890ff !important;
    }

    .market-top {
      display: flex;
      flex-direction: row;

      .market-img {
        width: 200px;
        height: 170px;
        margin-right: 10px;
        display: flex;
        align-items: center;

        img {
          width: 100%;
          height: auto;
          max-height: 170px;
          border-radius: 10px;
        }
      }

      .market-des {
        width: calc(100% - 220px);
        padding: 10px 10px 0px 10px;

        .market-title {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          color: #101010;
          font-size: 16px;
          font-weight: bold;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          height: 30px;
          cursor: pointer;
        }

        .market-info {
          display: flex;
          flex-direction: column;
          font-size: 13px;
          color: #101010;
          line-height: 25px;

          label {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;
            cursor: pointer;
          }
        }
      }
    }

    .info {
      display: flex;
      flex-direction: row;
      cursor: pointer;
      font-size: 13px;
      color: #101010;
      line-height: 25px;
      //margin-bottom: 2px;

      div:first-child {
        width: 22%;
        display: flex;
        flex-direction: column;
      }

      div:nth-child(2) {
        width: 33%;
        display: flex;
        flex-direction: column;
      }

      div:last-child {
        width: 45%;
        display: flex;
        flex-direction: column;
      }
    }

    .market-text {
      color: #101010;
      font-size: 13px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      line-height: 25px;
    }
  }

  .el-tabs {
    height: 100%;
  }

  ::v-deep .el-tabs__content {
    height: calc(100% - 50px);
    position: relative;
    margin-top: 10px;
  }
}
.tags {
  margin-left: 10px;
  .tags_box {
    display: flex;
    flex-wrap: wrap;
  }
  .tag {
    padding: 2px 8px;
    font-size: 14px;
    margin: 0 10px 10px 0;
  }
  .blue {
    background: #1890ff30;
    color: #1890ff;
  }
  .purple {
    background: #7578ff30;
    color: #7578ff;
  }
}
.no_hasToken {
  width: 104px;
  height: 32px;
  border-radius: 127px;
  border: 1px solid #3d3d3d;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
